<script setup>
import avatar2 from '@images/avatars/avatar-2.png'
import pdf from '@images/icons/project-icons/pdf.png'
</script>

<template>
  <VCard title="构建DELETE语句">
    DELETE FROM table_name WHERE condition;
    <VCardText>
      <VTimeline
        side="end"
        align="start"
        truncate-line="both"
        density="compact"
        class="v-timeline-density-compact v-timeline-icon-only"
      >
        <VTimelineItem>
          <template #icon>
            <span class="timeline-bg-white">DELETE</span>
          </template>

          <VCard
            class="bg-light-error"
            variant="text"
          >
            <VCardText v-if="false">
              <div class="d-flex justify-space-between align-center mb-1">
                <span class="app-timeline-title">Get on the flight</span>
                <small class="app-timeline-meta">Wednesday</small>
              </div>

              <div class="app-timeline-text mb-1">
                <span>Charles de Gaulle Airport, Paris</span>
                <VIcon
                  size="20"
                  icon="tabler-arrow-right"
                  class="mx-2 flip-in-rtl"
                />
                <span>Heathrow Airport, London</span>
              </div>
              <p class="app-timeline-meta mb-1">
                6:30 AM
              </p>

              <div class="app-timeline-text d-flex align-center gap-2">
                <div>
                  <VImg
                    :src="pdf"
                    :width="22"
                  />
                </div>

                <span>booking-card.pdf</span>
              </div>
            </VCardText>
          </VCard>
        </VTimelineItem>
        
        <VTimelineItem>
          <template #icon>
            <span class="timeline-bg-white">WHERE</span>
          </template>

          <VCard
            class="bg-light-primary"
            variant="text"
          >
            <VCardText v-if="false">
              <div class="d-flex justify-space-between align-center mb-1">
                <span class="app-timeline-title">Interview Schedule</span>
                <span class="app-timeline-meta">April, 18</span>
              </div>

              <p class="app-timeline-text mb-0">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Possimus quos, voluptates voluptas rem veniam expedita.
              </p>

              <VDivider class="my-4" />

              <div class="d-flex justify-space-between align-center">
                <span class="d-flex align-center">
                  <VAvatar
                    size="40"
                    :image="avatar2"
                    class="me-2"
                  />

                  <div>
                    <h6 class="text-sm font-weight-medium">Rebecca Godman</h6>
                    <span class="text-xs">Javascript Developer</span>
                  </div>
                </span>

                <div>
                  <IconBtn>
                    <VIcon
                      size="20"
                      icon="tabler-message"
                    />
                  </IconBtn>
                  <IconBtn>
                    <VIcon
                      size="20"
                      icon="tabler-phone"
                    />
                  </IconBtn>
                </div>
              </div>
            </VCardText>
          </VCard>
        </VTimelineItem>
      </VTimeline>
    </VCardText>
  </VCard>
</template>

<style scoped>
.timeline-bg-white {
  background-color: #fff;
  text-align: center;
}
</style>
